<script setup>
// 引入 vue 的 ref 响应式 API
import { ref } from 'vue'
// 引入 vue-router 的路由相关 API
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'

// menuOpen 用于控制移动端菜单的展开和收起，初始为收起（false）
const menuOpen = ref(false)
// 获取当前路由对象
const route = useRoute()
// 获取路由器实例，用于编程式导航
const router = useRouter()

const { locale, t } = useI18n()

// 路由跳转并关闭菜单的函数
function navTo(path) {
  router.push(path) // 跳转到指定路径
  menuOpen.value = false // 跳转后关闭移动端菜单
}

function switchLang(lang) {
  locale.value = lang
}
</script>

<template>
  <div id="app">
    <!-- 语言切换按钮演示 -->
    <div style="text-align:right; margin: 10px;">
      <button @click="switchLang('zh')">中文</button>
      <button @click="switchLang('en')">English</button>
    </div>
    <!-- 国际化文本演示 -->
    <h1>{{ $t('welcome') }}</h1>
    <!-- 顶部导航栏 -->
    <header class="navbar">
      <!-- 网站 Logo，点击跳转到首页 -->
      <div class="logo" @click="navTo('/')">企业LOGO</div>
      <!-- 导航链接，包含首页、关于我们、产品服务、案例展示、联系我们 -->
      <nav :class="['nav-links', { open: menuOpen }]">
        <!-- 每个 a 标签都根据当前路由高亮显示，并点击跳转 -->
        <a :class="{active: route.path==='/' }" @click="navTo('/')">首页</a>
        <a :class="{active: route.path==='/about' }" @click="navTo('/about')">关于我们</a>
        <a :class="{active: route.path==='/services' }" @click="navTo('/services')">产品服务</a>
        <a :class="{active: route.path==='/cases' }" @click="navTo('/cases')">案例展示</a>
        <a :class="{active: route.path==='/contact' }" @click="navTo('/contact')">联系我们</a>
      </nav>
      <!-- 移动端菜单按钮（三条横线），点击切换菜单展开/收起 -->
      <div class="menu-btn" @click="menuOpen = !menuOpen">
        <!-- 三个 span 组成汉堡按钮，open 类用于动画效果 -->
        <span :class="{open: menuOpen}"></span>
        <span :class="{open: menuOpen}"></span>
        <span :class="{open: menuOpen}"></span>
      </div>
    </header>
    <!-- 主内容区域，显示当前路由对应的页面 -->
    <main>
      <router-view />
    </main>
  </div>
</template>

<style scoped>
/* 顶部导航栏样式，响应式布局 */
.navbar {
  display: flex; /* 横向排列 */
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 两端对齐 */
  padding: 0 32px; /* 左右内边距 */
  height: 64px; /* 高度 */
  background: #fff; /* 背景色 */
  box-shadow: 0 2px 8px #e3e3e3; /* 阴影 */
  position: sticky; /* 吸顶效果 */
  top: 0;
  z-index: 10;
}
.logo {
  font-size: 1.5em; /* 字体大小 */
  font-weight: bold; /* 加粗 */
  color: var(--primary); /* 主题色（需在全局定义） */
  cursor: pointer; /* 鼠标悬停变手型 */
}
.nav-links {
  display: flex; /* 横向排列导航链接 */
  gap: 32px; /* 间距 */
}
.nav-links a {
  color: #222; /* 字体颜色 */
  font-size: 1.1em; /* 字体大小 */
  text-decoration: none; /* 去掉下划线 */
  padding: 8px 0; /* 上下内边距 */
  position: relative;
  transition: color 0.2s; /* 颜色过渡动画 */
}
.nav-links a.active {
  color: var(--primary); /* 当前页面高亮 */
  font-weight: bold;
}
.menu-btn {
  display: none; /* 默认隐藏（桌面端不显示） */
  flex-direction: column; /* 纵向排列三条线 */
  gap: 5px;
  cursor: pointer;
  margin-left: 16px;
}
.menu-btn span {
  display: block;
  width: 28px;
  height: 3px;
  background: #222;
  border-radius: 2px;
  transition: all 0.3s; /* 动画过渡 */
}
/* 菜单展开时，三条线变成 X 形状 */
.menu-btn span.open:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.menu-btn span.open:nth-child(2) {
  opacity: 0;
}
.menu-btn span.open:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
/* 响应式：屏幕宽度小于900px时，调整导航栏间距 */
@media (max-width: 900px) {
  .navbar { padding: 0 12px; }
  .nav-links { gap: 16px; }
}
/* 响应式：屏幕宽度小于700px时，导航变为纵向抽屉菜单 */
@media (max-width: 700px) {
  .nav-links {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 2px 8px #e3e3e3;
    display: none; /* 默认隐藏 */
  }
  .nav-links.open {
    display: flex; /* 展开时显示 */
  }
  .nav-links a {
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
  }
  .menu-btn {
    display: flex; /* 移动端显示菜单按钮 */
  }
}
main {
  min-height: calc(100vh - 64px); /* 主内容区最小高度，减去导航栏高度 */
  background: none;
}
</style>
